<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="item in letters">{{item}}</li>
			</ul>
			<button type="button" @click="btnClick">按钮</button>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app=new Vue({
				el:'#app',
				data:{
					letters:['A','B','C','D','E']
				},methods:{
					btnClick(){
						//1.push方法
						//this.letters.push("aaaa")
						// this.letters.push('aaaaaaa','bbbbbbb','cccccccc');
						
						//2.pop() 删除数组最后一个元素
						//this.letters.pop();
						
						//3.shift() 删除数组中第一元素
						// this.letters.shift();
						
						//4.unshift(); 在数组最前面添加元素
						// this.letters.unshift("aaa");
						// this.letters.unshift("aaa",'bbbbbb','cccccccccc');
						
						//5.splice作用：删除元素/插入元素/替换元素
						//删除元素：第二个参数传入你要删除几个元素(如果没有传，就删除后面所有的元素)
						//const start=2;
						//this.letters.splice(start,this.letters.length-start);
						//this.letters.splice(start);
						//替换元素：第二个参数，表示我们要替换几个元素，后面是用于替换前面的元素
						// this.letters.splice(1,3,'m','n','l','x');
						//插入元素：第二个参数，传入0，并且后面跟上要插入的元素
						// this.letters.splice(1,0,'m','n','l','x');
						
						//6.sort() 排序
						// this.letters.sort()
						
						//7.reverse() 排序反转
						// this.letters.reverse();
						
						//2.通过索引值修改数组中的元素
						//注意：不是相应式
						// this.letters[0]='bbbb'
						// this.letters.splice(0,1,'bbbb');
						
						//set(要修改的对象，索引值，修改后的值)
						Vue.set(this.letters,0,'bbbb')
					}
				}
			})
		</script>
	</body>
</html>
